@(qcm : Qcm , listeRep : List[UtilisateurQcm], moy : String, notes : Map[Integer,Integer], repJustes : Map[Question, Integer]) 
@import helper._ 
<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Note');
        data.addColumn('number', 'Nombre');
        
        data.addRows([
            [0,@notes.get(0)],[1,@notes.get(1)],
	       	[2,@notes.get(2)],[3,@notes.get(3)],
	       	[4,@notes.get(4)],[5,@notes.get(5)],
			[6,@notes.get(6)],[7,@notes.get(7)],
			[8,@notes.get(8)],[9,@notes.get(9)],
			[10,@notes.get(10)],[11,@notes.get(11)],
			[12,@notes.get(12)],[13,@notes.get(13)],
			[14,@notes.get(14)],[15,@notes.get(15)],
			[16,@notes.get(16)],[17,@notes.get(17)],
			[18,@notes.get(18)],[19,@notes.get(19)],
			[20,@notes.get(20)]
       	]);
        // Set chart options
        var options = {
        		title:'Repartition des Notes',
        		bar: {groupWidth : '95%'},
        		vAxis: {
        			minorGridlines:{
        				count:1,
        				color : '#D8D8D8'
        			}
        		}
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

@main("Detail Qcm") {
@header()
	
	<fieldset>
	<div class="bs-docs-example" >
	<legend>D&eacute;tails des r&eacute;sultats du qcm : @qcm.getLibelle() </legend>	
</br>
</br>
        @if(listeRep.size()==0){
	        <div class="hero">Aucun resultat disponible</div>
	        <a class="btn btn-primary" href="@routes.ModifierQCM.modifierQCM(qcm.getIdQcm())">Modifier le QCM <i class="icon-white icon-circle-arrow-right"></i></a>
        }else {
        <table class="table table-condensed">
            <thead>
            	<tr>
                    <th><h5>Nom</h5></th>
                    <th><h5>Prenom</h5></th>
                    <th><h5>Date</h5></th>
                    <th><h5>Duree</h5></th>
                    <th><h5>Note</h5></th>
                    <th><h5>Detail</h5></th>
                    <th><h5>Supprimer</h5></th>
                </tr>
            </thead>
            <tbody>

			@for(utilisateurQcm <- listeRep) {			
				<tr>
					<td>@utilisateurQcm.getUtilisateur.getNom()</td>
					<td>@utilisateurQcm.getUtilisateur.getPrenom()</td>
					<td>@utilisateurQcm.getDate().format("dd/MM/yyy HH:mm")</td>
					<td>@utilisateurQcm.getDuree()</td>
					<td>@utilisateurQcm.getNote()</td>
					<td><div class="input-append">
						<a class="btn btn-primary" href="@routes.PasserQCM.calculNote(utilisateurQcm.getIdUtilisateurQcm())">Details<i class="icon-white icon-circle-arrow-right"></i></a>
					</div></td>
					<td><div class="input-append">
						<a class="btn btn-primary" href="@routes.ConsulterQCM.supprimerUtilisateurQcm(utilisateurQcm.getIdUtilisateurQcm())">Supprimer<i class="icon-white icon-circle-arrow-right"></i></a>
					</div></td>
				</tr>
			}
			</tbody>
       	</table>
		   <div id="chart_div"></div>
		   <br/>
		   <h4 style="color:green"><strong>Moyenne : @moy</strong></h4>
		   </br>
		   </br>
		   @if(qcm.getEstPublie()){
		   		<h4>Les notes de ce QCM ont ete publi&eacute;es.</h4></br>
		   } else {
		   <div style="border-style: solid; border-width:1px">
		   </br>
			</br>
		   <div class="row">
		   <div class="span1"></div>
					<div class="span5">
		   				<p>
						   Vous n'avez pas besoin de modifier les notes,</br>cliquez sur "Publier les notes"  
						</div>
						<div class="span5">
						 Si vous voulez modifier les notes cliquez sur "Modifier la notation" 
						</div>
			</div>
			<div class="row">
			<div class="span1"></div>
						<div class="span5">
							<a class="btn btn-primary" href="@routes.ConsulterQCM.validerQcm(qcm.getIdQcm())">Publier les Notes<i class="icon-white icon-circle-arrow-right"></i></a>
						</div>
						<div class="span5">
						  <a class="btn btn-primary" href="@routes.ModifierQCM.modifierNotationQCM(qcm.getIdQcm())">Modifier la notation<i class="icon-white icon-edit"></i></a></br>
						</div>   	
			</div>
			</br>
			</br>
			</div>			
		   }
		   </br>
		   </br>	
		   </br>	
		   </br>	
		  <legend>Taux de bonne r&eacute;ponse par question </legend> 
		  </br>
   		<table class="table table-condensed">   
            <thead>
            	<tr>
                    <th><h5>Libelle</h5></th>
                    <th><h5>Difficulte</h5></th>
                    <th><h5>Nb reponses justes</h5></th>
                    <th><h5>%age</h5></th>
                </tr>
            </thead>
            <tbody>
   			@for(question <- qcm.getListeQuestions()) {			
				<tr>
					<td>@question.getLibelleQuestion()</td>
					<td>@question.getNiveauQuestion().getLibelleNiveau()</td>
					<td>@repJustes.get(question)</td>
					<td>@(repJustes.get(question)*100/listeRep.size()) %</td>
				</tr>
	}
	</tbody>
	</table>
	</div>
	</fieldset>
   <a class="btn btn-primary" href="@routes.Application.redirectionAccueil("")">Menu principal <i class="icon-white icon-circle-arrow-right"></i></a>
   }     
}
